<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        img {
            vertical-align: top;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .adver-wrapper {
            width: 300px;
            /* height: 400px; */
            background-color: grey;
            position: fixed;
            position: fixed;
            right: 5px;
            bottom: 5px;
            /* display: none; */
        }

        .adver-header {
            line-height: 32px;
            position: relative;
        }

        .adver-header .adver-tips {
            font-size: 12px;
            text-indent: 13px;
        }

        .adver-header .adver-close {
            position: absolute;
            right: 5px;
            top: 0;
        }

        .adver-main img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 如果标签名或属性名为大写 浏览器解析式默认转化为小写 -->
    <DIV CLASS="ONE"></DIV>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">点击</button></p>

        <!-- 注意: 子组件接收的属性(数据) 是由父组件传入的  -->
        <!-- 当前案例传入的属性时静态属性(属性值都是字符串类型) => 传入之后不可更改 => 跟习惯作为子组件的初始值 -->
        <!-- 静态属性测试  => 组件被接收数据时 属性名全都是字符串  -->
        <!-- <prop-test num="1" str="hello" bool="true" a="null" b="undefined" arr="[1,2,3]" obj="{a:1,b:2,c:3}" ></prop-test> -->

        <!-- 动态属性测试  =>
            v-bind:属性名="指令值"  (指令值可以是javascript表达式  data中数据)
            优点: 
            1. 组件接收数据时 得到原本传入的数据类型 2. 可以使用父组件中的数据  -->
        <prop-test class="one" style="background:red" :num="count" :str="'hello'" :bool="true" :a="null" :b="undefined" :arr="[1,2,3]" :obj="{a:1,b:2,c:3}" ></prop-test>
    </div>
</body>

<script>

    // 全局组件  => 缺点 (倒计时时间  是否重复广告  广告的图片  点击广告时跳转的地址 都是定死的)
    // 期望 => 其他组件(父组件) 在使用此组件是可以传递一些数据 (!数据是父组件给子组件传入的)

    // 父组件 => 传数据
    // 子组件 => 接收数据

    // 单向数据流 =>  子组件不能直接修改父组件传入的数据   

    // ["张三",55,66,77]  =>  {name:"xxx",chinese:xxx}
    
    Vue.component("prop-test",{
        // props可以是一个数组,对应属性名接收数据 (被接收的数据才会绑定到当前实例,存放到 this.$props)  -> 但是并没有限制接收数据的类型

        // 没有被props接收的数据 (1. 透过组件->传递到组件的根元素上(全都作为html属性 ->继承)  2. 可以通过 this.$attrs 获取传入的数据 )
        // 此时: 如果组件上存在同名属性 => 传入属性会覆盖原本的 (style class除外 => 合并)

        // 注意: 如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false   (class style除外 -> class和style还是一样会透传和合并 => inheritAttrs: false 选项不会影响 style 和 class 的绑定。)   
        // 此时 组件的$attrs => 依旧可用  => 可以通过 $attrs => 在指定元素内使用
        inheritAttrs:false,
        data(){
            return {

            }
        },
        template:`<div class="list" style="width:100px;height:100px" str="world">
            <span :title="$attrs.str">我是组件prop-test:{{$attrs.num}}</span>
        </div>`,
        watch:{
            num:function(newVal,oldVal){
                console.log("num接收的数据发生了改变",newVal,oldVal);
            },
        },
        mounted() {
            // console.log("接收的数据",this.$props);  // 被接收的数据才会绑定到当前实例,存放到 this.$props
            console.log("组件实例",this);  //
        },
    })
    
    // 根实例 / 根组件 (初始化渲染)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        },
    })
   

   

</script>

</html>